<template>
    <view class="header">
        <image class="img-title" src="../../static/icon/back-btn.png" @click="navigateBack" mode="" />
        <view class="title">{{ $t('market.shengou.new') }}</view>
    </view>

    <view class="main">
        <view class="section1">
            <view class="first-line">
                <view class="stockName">{{ currentStock.stockName }}</view>
                <view class="stockCode">{{ currentStock.stockCode }}</view>
            </view>
            <view class="second-line">
                <view class="date">
                    <view class="start">
                        <view class="key">{{ $t('market.shengou.start') }}</view>
                        <view class="value">{{ currentStock.drawTime.slice(0, 10) }}</view>
                    </view>
                    <view class="starting">
                        <view class="key">{{ $t('market.shengou.starting') }}</view>
                        <view class="value">{{ `${currentStock.applyTime.slice(0,
                            10)} ${$t('market.shengou.zhi')} ${currentStock.applyEndTime.slice(0, 10)}` }}</view>
                    </view>
                    <view class="end">
                        <view class="key">{{ $t('market.shengou.end') }}</view>
                        <view class="value">{{ currentStock.amtTime.slice(0, 10) }}</view>
                    </view>
                </view>
                <view class="dot-line">
                    <!-- 第一个圆 -->
                    <view :class="[
                        'dot-left dot',
                        { size: currentStock.state == 0 },
                    ]">
                        <view :class="[
                            'inner-round',
                            { displayNone: currentStock.state != 0 }
                        ]"></view>
                    </view>
                    <!-- 线 -->
                    <view class="line-left line"></view>
                    <!-- 第二个圆 -->
                    <view :class="[
                        'dot-middle round',
                        { size: currentStock.state == 1 },
                    ]">
                        <view :class="[
                            'inner-round',
                            { displayNone: currentStock.state != 1 }
                        ]"></view>
                    </view>
                    <!-- 线 -->
                    <view class="line-right line"></view>
                    <!-- 第三个圆 -->
                    <view :class="[
                        'dot-right dot',
                        { size: currentStock.state == 2 },
                    ]">
                        <view :class="[
                            'inner-round',
                            { displayNone: currentStock.state != 2 }
                        ]"></view>
                    </view>
                </view>
            </view>
        </view>
        <view class="section2">
            <view class="list">
                <view class="key">{{ $t('market.shengou.priceIncreaseMinus') }}</view>
                <view class="value">{{ currentStock.priceIncreaseMinus }}</view>
            </view>
            <view class="list">
                <view class="key">{{ $t('market.shengou.priceMinus') }}</view>
                <view class="value">{{ currentStock.priceMinus }}</view>
            </view>
            <view class="list">
                <view class="key">{{ $t('market.shengou.marketPrice') }}</view>
                <view class="value">{{ currentStock.marketPrice }}</view>
            </view>
            <view class="list">
                <view class="key">{{ $t('market.shengou.total') }}</view>
                <view class="value">{{ `${currentStock.allNum}${$t('information.profit.number')}` }}</view>
            </view>
            <view class="list">
                <view class="key">{{ $t('market.shengou.end-date') }}</view>
                <view class="value">{{ currentStock.marketPrice }}</view>
            </view>
            <view class="list">
                <view class="key">{{ $t('market.shengou.sale-price') }}</view>
                <view class="value">{{ currentStock.applyPrice }}</view>
            </view>
        </view>
        <view class="section3">
            <view class="title">
                <view class="block"></view>
                <view class="text">{{ $t('market.shengou.post-information') }}</view>
            </view>
            <view class="list">
                <view class="key">{{ $t('market.shengou.post.market') }}</view>
                <view class="value">{{ currentStock.marketName }}</view>
            </view>
            <view class="list">
                <view class="key">{{ $t('market.shengou.post.real-price') }}</view>
                <view class="value">--- </view>
            </view>
            <view class="list">
                <view class="key">{{ $t('market.shengou.post.cur-price') }}</view>
                <view class="value">{{ currentStock.applyPrice }}</view>
            </view>
            <view class="list">
                <view class="key">{{ $t('market.shengou.post.host') }}</view>
                <view class="value">{{ currentStock.stockName }}</view>
            </view>
            <view class="list">
                <view class="key">{{ $t('market.shengou.post.combrate') }}</view>
                <view class="value">{{ currentStock.winningRate }}</view>
            </view>
        </view>
        <view class="section4" v-if="currentStock.state == 1">
            <view class="key">{{ $t('market.shengou.num') }}</view>
            <input type="text" v-model="shengouNumber" :placeholder="$t('market.shengou.num-input')" class="value">
        </view>
        <view class="section5" v-if="currentStock.state == 1">
            <view class="btn" @click="addApply">{{ $t('market.shengou.submit') }}</view>
        </view>
    </view>
</template>

<script setup>
import { ref,getCurrentInstance } from 'vue'
import { requestApi } from '@/api';
import { onLoad } from '@dcloudio/uni-app';
import { toast } from '@/utils/storage';
// 獲取this
const _this = getCurrentInstance().appContext.config.globalProperties

const stockCodeParam = ref()
const shengouNumber = ref()
async function addApply() {
    const option = {
        stockCode: stockCodeParam.value,
        applyNum: shengouNumber.value
    }
    const { status,msg } = await requestApi.addApply(option)
    if (status == 0) {
        // console.log(_this.$t('market.shengou.success'));
        toast(msg)
    } else {
        toast(msg)
    }
}


// 返回上一层
function navigateBack() {
    let canNavBack = getCurrentPages()
    if (canNavBack && canNavBack.length > 1) {
        uni.navigateBack()
    } else {
        history.back();
    }
}
// 上一个页面的传值
const currentStock = ref({})
onLoad(e => {
    let item = JSON.parse(e.item)
    currentStock.value = item
    stockCodeParam.value = JSON.parse(e.code)
})
</script>

<style lang="scss">
page {
    background-color: $uni-bg-color-dark;
}

.header {
    width: 100%;
    // height: 88rpx;
    // #ifndef H5
    padding-top: 80rpx;
    // #endif
    padding-bottom: 15rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    background-color: #202129;

    .title {
        text-align: center;
        color: #fff;
        margin: 0 auto;
        padding-right: 104rpx;
        font-size: 32rpx;
    }

    .img-title {
        width: 58rpx;
        height: 58rpx;
        margin-left: 46rpx;
    }
}

.main {

    padding-top: 130rpx;
    // #ifndef H5
    padding-top: 218rpx;
    // #endif
    display: flex;
    flex-direction: column;
    align-items: center;

    .section1 {
        background: linear-gradient(45deg, #2D7DFC, #0B34FA);
        height: 273rpx;
        width: 671rpx;
        border-radius: 30rpx;
        margin-bottom: -67rpx;

        .first-line {
            display: flex;
            align-items: center;
            margin-left: 35rpx;
            margin-top: 25rpx;

            .stockName {
                margin-right: 8rpx;
                font-size: 32rpx;
                color: #fff;
            }

            .stockCode {
                color: #fff;
                opacity: .6;
            }
        }

        .second-line {
            margin-top: 22rpx;

            .date {
                display: flex;
                color: #fff;
                justify-content: space-between;
                padding: 0 30rpx 0;

                .starting,
                .start,
                .end {
                    text-align: center;

                    .key {
                        font-size: 24rpx;
                    }

                    .value {
                        font-size: 20rpx;
                    }
                }
            }

            .dot-line {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 13rpx;

                .dot {
                    width: 10rpx;
                    height: 10rpx;
                    background-color: #fff;
                    border-radius: 100%;
                    margin: 0 10rpx;
                    position: relative;
                }

                .size {
                    width: 27rpx !important;
                    height: 27rpx !important;
                }

                .displayNone {
                    display: none;
                }

                .round {
                    width: 10rpx;
                    height: 10rpx;
                    background-color: #fff;
                    border-radius: 100%;
                    margin: 0 5rpx;
                    position: relative;

                }

                .inner-round {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background-color: #fff;
                    width: 25rpx;
                    height: 25rpx;
                    border: #0B34FA solid 5rpx;
                    border-radius: 100%;
                }

                .line {
                    width: 222rpx;
                    height: 2rpx;
                    background-color: #fff;
                }
            }
        }
    }

    .section2 {
        background-color: #20212A;
        width: 100%;
        height: 213rpx;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(0, 1fr));
        column-gap: 57.5rpx;
        padding: 47rpx 62rpx 29rpx;

        .list {
            display: flex;
            justify-content: space-between;

            .key {
                color: #7E8394;
            }

            .value {
                color: #fff;
            }
        }
    }

    .section3 {
        margin: 20rpx auto 57rpx;
        width: 668rpx;
        // height: 403rpx;
        background-color: #20212A;
        padding: 18rpx 40rpx 24rpx;

        .title {
            color: #fff;
            display: flex;
            align-items: center;
            padding-bottom: 14rpx;
            border-bottom: solid 4rpx $uni-bg-color-dark;

            .block {
                width: 10rpx;
                height: 37rpx;
                background-color: #2D7DFC;
                border-radius: 203rpx;
                margin-right: 12rpx;
            }
        }

        .list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            margin-bottom: 24rpx;

            .key {
                color: #7E8394;
                font-size: 28rpx;
            }

            .value {
                color: #fff;
            }
        }
    }

    .section4 {
        width: 666rpx;
        margin: 0 auto 133rpx;
        background-color: #20212A;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 28rpx;

        .key {
            margin-top: 24rpx;
            margin-bottom: 24rpx;
            margin-left: 33rpx;
            color: #7E8394;
        }

        .value {
            color: #fff;
            padding-left: 20rpx;
        }
    }

    .section5 {

        .btn {
            width: 500rpx;
            height: 96rpx;
            border-radius: 204rpx;
            background-color: #2D7DFC;
            color: #fff;
            font-size: 36rpx;
            text-align: center;
            line-height: 96rpx;
        }
    }


}
</style>